<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>计算热量之和</title>
    <style type="text/css">
        /*CSS初始化*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:16px "微软雅黑","宋体";}
a{color:#14191e;text-decoration:none}
a:hover{color:#666;font-weight:bold}
em{font-style:normal}
li{list-style:none}
/*img{border:0;vertical-align:middle}*/
input{
    outline: none;
}
/*CSS初始化结束*/
/*头部开始*/
header{
    width: 100%;
    height: 80px;
}
/*body{*/
    /*height: 4000px;*/
/*}*/
.logo{
    float: left;
    width: 300px;
    height: 80px;
}
header .nav{
    float: left;
    width: 500px;
    display: flex;
}
header .nav ul{
    float: left;
    text-align: center;
}
header .nav ul li{
    display: inline;
    float: left;
    width: 100px;

}
header .nav ul li a{
    display: inline-block;
    float: left;
    padding-left:25px;
    height: 80px;
    line-height: 80px;
}
.search{
    float: left;
    width: 300px;
    height: 50px;
    margin: 15px 15px;
    position: relative;
}
.search input{
    width: 260px;
    height: 40px;
    border-top:none;
    border-left:none;
    border-right:none;
}
.search img{
    float: right;
    width: 20px;
    margin: 10px 0;
    position: absolute;
    top: 5px;
    right: 10px;
}
.login{
    float: right;
    width: 219px;
    display: flex;
    flex-direction:row;
}
.login li{
    display: inline-block;
    flex: 1;
    padding-left: 27px;
}
.login li a{
    height: 50px;
    line-height: 50px;
    float: right;
    margin-top: 15px;
}
/*头部结束*/
/*注册开始*/
.hot_power{
    width: 1090px;
    height: 880px; 
    margin: 5px auto;   
}
.h-t{
    color: #f01400;
    font-size: 40px;
    padding-bottom: 10px;
}
.h-c{
    width: 1090px;
    height: 350px;
    background-color: #f6f6f6;
}
.c-l{
    width: 60%;
    float: left; 
}
.c-l img{
    margin: 0 auto;
    padding-top: 55px;
    padding-left: 110px;
}
.c-r{
    padding-top: 50px;
    font-weight: 400;
    width: 40%;
    color: #000;
    opacity: 0.8;
    margin: 0 auto;
    font-size: 20px;
    float: right;
}
.c-r h3{
    color:#f01400;
}
.c-r p {
    width: 80%;
    margin-top: 15px;
}
.hot_power .h-b{
    background-color: #f6f6f6;
}
.hot_power .h-b p{
    margin-top: 15px;
    line-height: 30px;
}
/*注册结束*/
/*底部开始*/
.line{
    width: 90%;
    border-top: 1px solid #666;
    margin: 30px auto 0;
    color: #ff7631;
    padding: 15px;
}
footer p{
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}
footer a{
    font-size: 14px;
    color: #999;
}
.copyright{
  text-align: center;
    color: #999;
    font-size: 14px;
    margin-top: 15px;
}
/*底部结束
    </style>
</head>
 <!--头部开始-->
    <header>
        <div class="logo"><img src="images/logo.jpg" alt=""></div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">菜谱</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <img src="images/search.png">
        </div>
        <div class="login">
            <ul>
                <li><a href="register.html">注册</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
    </header>
        <!--头部结束-->
        <!-- 注册开始 -->
        <div class="hot_power">
            <div class="h-t">食物卡路里计算器</div>
            <div class="h-c">
                <div class="c-l">
                    <img src="images/register/reg3.jpg">
                </div>  
                <div class="c-r">
                    <form>
                    <h3>个人设置</h3>
                    <table>
                        <tr>
                            <td>性别：</td>
                            <td align="center"><input type="radio" name="sex1" id="man">男</td>
                            <td align="left"><input type="radio" name="sex1" id="woman">女</td>
                        </tr>
                        <tr>
                            <td>年龄：</td>
                            <td><input type="text" id="age" value=""></td>
                        </tr>
                        <tr>
                            <td>体重：</td>
                            <td><input type="text" id="weight" value=""></td>
                        </tr>
                    </table>
                    <!-- <input type="submit" name="" value="提交" style="width:50px;height: 30px; margin-top: 10px;"> -->
                    </form>
					<div id="content"></div>
                    <p>您好，根据您的体型测试出您一天所需的基本热量为<span>$('p span').text(power)
                        </span>（千焦耳）</p>
                </div>  
            </div>
            <div class="h_b">
                <p style="margin-top: 20px;font-size: 30px;line-height: 30px;color:#f01400;">计算热量需知</p>
                <p style="margin-top: 15px;font-size: 18px;line-height: 30px;">你好，欢迎您来到走胃更走心的计算热量功能处，由上面可以计算不同的人可以算出不同的一天所需的基本热量，请您认真完成上面要填写的哟，祝您愉快！</p>
                <p style="margin-top: 15px; font-size: 18px;line-height: 30px;">备注:本网站所提供食物都是100g的食物的热量,体重单位为Kg;</p>
                <p style="margin: 15px 0;font-size: 18px;line-height: 30px;">请在下面的框框中输入你今天所准备吃的食物，每种食物之间以逗号分隔开，以便帮您计算出正确的热量之和，祝您吃得健康，更要吃出美！</p>
                <textarea rows="8" cols="152"></textarea>
                <p style="margin-top: 20px;font-size: 24px;line-height: 30px;">您所吃的热量为:<span style="font-size: 30px;line-height: 30px;">     </span>(千焦耳)</p>
            </div>
        </div>
        <!-- 注册结束 -->
        <footer>
        <!--底部开始-->
        <div class="line"><h3>走胃更走心---吃得健康又营养!</h3></div>
        <p class="link">友情链接:
            <a href="http://life.iqiyi.com/">爱奇艺生活</a>
            <a href="http://www.zhms.cn/">中华美食网</a>
            <a href="http://www.pcbaby.com.cn/">太平洋亲子网</a>
            <a href="http://food.poco.cn/">POCO美食网</a>
            <a href="http://www.21food.cn/">食品商务网</a>
            <a href="http://www.mama.cn/">妈妈网</a>
            <a href="http://www.39yst.com/">三九养生堂</a>
            <a href="http://www.258.com/">企业服务平台</a>
            <a href="http://www.yidianzixun.com/">一点资讯</a>
            <a href="http://www.hc360.com/">慧聪网</a>
        </p>
        <p class="copyright">版权所有 © 2004-2019 走心更走胃 保留所有权利</p>
        <!--底部结束-->
    </footer>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function(){
		    var  power;
			$('#man').on('click',function(){
				var age = $('#age').val();
				var weight = $('#weight').val();
				(age >=18 && age <= 30) ? power=15.2*weight+600 : power=0;
				(age > 30 && age <= 60) ? power=11.5*weight+830 : power=0;
				(age > 60) ? power=13.4*weight+490 : power=0;
				$('#content').html(power);
			});
            $('#woman').on('click',function(){
                var age = $('#age').val();
                var weight = $('#weight').val();
                (age >=18 && age <= 30) ? power=14.6*weight+450 : power=0;
                (age > 30 && age <= 60) ? power=8.6*weight+830 : power=0;
                (age > 60) ? power=10.4*weight+600 : power=0;
                $('#content').html(power);
            });
		})
        
    </script>
</body>
</html>